<template>
    <div class="page">
        <div class="evaluate-temp">
            <div class="title">
                <img src="../../assets/images/logistics/info_evaluate.png" alt="" />
                <h3>订单信息</h3>
            </div>
            <div class="content">
                <p><span>商品</span>{{ info.prodName }}</p>
                <p><span>发货时间</span>{{ info.sendTime }}</p>
                <p><span>到货时间</span>{{ info.receiveTime }}</p>
            </div>
        </div>
        <div class="evaluate-temp">
            <div class="title">
                <img src="../../assets/images/logistics/info_evaluate.png" alt="" />
                <h3>服务评价</h3>
            </div>
            <div class="content">
                <ScoringTemp
                    title="描述相符"
                    :score="prodConformityPoint"
                    :flag="$route.query.status === 'write'"
                    :ifSuccess="startStatus"
                    :showScore="true"
                    @changeStar="changeStar1"
                ></ScoringTemp>
                <ScoringTemp
                    title="物流速度"
                    :score="logisticsSpeedPoint"
                    :flag="$route.query.status === 'write'"
                    :ifSuccess="startStatus"
                    :showScore="true"
                    @changeStar="changeStar2"
                ></ScoringTemp>
                <ScoringTemp
                    title="服务质量"
                    :score="serviceQualityPoint"
                    :flag="$route.query.status === 'write'"
                    :ifSuccess="startStatus"
                    :showScore="true"
                    @changeStar="changeStar3"
                ></ScoringTemp>
            </div>
        </div>
        <textarea placeholder="请填写评价" :readonly="$route.query.status !== 'write'" v-model="evaluateVal"></textarea>
        <Button btn-title="提交评论" v-show="$route.query.status === 'write'" @tap="submitEvaluate" />
    </div>
</template>

<script>
import Button from '@/components/Button';
import ScoringTemp from '@/components/ScoringTemp';
import { EvaluateInfoApi, EvaluateApi, OderInfoApi } from '@/request/api';

export default {
    data() {
        return {
            startStatus: false,
            prodConformityPoint: 5,
            logisticsSpeedPoint: 5,
            serviceQualityPoint: 5,
            evaluateVal: '',
            info: {},
        };
    },
    components: {
        Button,
        ScoringTemp,
    },
    methods: {
        changeStar1(score) {
            this.prodConformityPoint = score;
        },
        changeStar2(score) {
            this.logisticsSpeedPoint = score;
        },
        changeStar3(score) {
            this.serviceQualityPoint = score;
        },
        submitEvaluate() {
            EvaluateApi({
                serialNo: this.$route.query.serialNo,
                prodConformityPoint: this.prodConformityPoint,
                logisticsSpeedPoint: this.logisticsSpeedPoint,
                serviceQualityPoint: this.serviceQualityPoint,
                comment: this.evaluateVal,
            }).then(() => {
                this.$router.back();
            });
        },
    },
    created() {
        this.startStatus = false;
        OderInfoApi({
            serialNo: this.$route.query.serialNo,
        }).then((res) => {
            this.info = res.data;
        });
        if (this.$route.query.status !== 'write') {
            EvaluateInfoApi({
                serialNo: this.$route.query.serialNo,
            }).then((res) => {
                this.startStatus = true;
                this.prodConformityPoint = res.data.prodConformityPoint;
                this.logisticsSpeedPoint = res.data.logisticsSpeedPoint;
                this.serviceQualityPoint = res.data.serviceQualityPoint;
                this.evaluateVal = res.data.comment ? res.data.comment : '客观好像不太喜欢说话的亚子~';
            });
        }
    },
};
</script>

<style lang="less" scoped>
.evaluate-temp {
    margin-bottom: 0.22rem;
    .title {
        display: flex;
        align-items: center;
        height: 0.7rem;
        padding: 0 0.3rem;
        box-sizing: border-box;
        background-color: #f5fafe;
        img {
            width: 0.27rem;
            margin-right: 0.2rem;
        }
        h3 {
            color: #033598;
        }
    }
    .content {
        min-height: 1.9rem;
        padding: 0.38rem 0.27rem;
        box-sizing: border-box;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #666666;
        span {
            color: #999;
            display: inline-block;
            min-width: 1.1rem;
            margin-right: 0.42rem;
        }
    }
}
textarea {
    width: 100%;
    border: none;
    height: 3rem;
    margin-top: 0.33rem;
    box-sizing: border-box;
    padding: 0.33rem 0.24rem;
}
</style>
